<template>
    <div class="madp-manager-reminder" v-if="!loading">
        <div class="madp-header">
            <el-tabs v-model="activeTab" class="tabs-menu" @tab-click="changeTab">
                <el-tab-pane label="待办任务" name="1"></el-tab-pane>
                <el-tab-pane label="我的待办" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="madp-content" style="margin-top: 10px">
            <mescroll-view :showMoreBtn="page.current * page.size < page.total" :total="page.total" @getMoreData="getMoreData">
                <div class="madp-content-filter" v-if="activeTab == 1">
                    <el-select v-model="taskType" placeholder="请选择" @change="changeType">
                        <el-option v-for="(item, idx) in taskTypeList" :key="idx" :label="item.label" :value="item.type"> </el-option>
                    </el-select>
                    <el-select v-model="taskStatus" placeholder="请选择" @change="changeStatus">
                        <el-option v-for="(item, idx) in taskStatusList" :key="idx" :label="item.label" :value="item.type"> </el-option>
                    </el-select>
                </div>
                <div class="madp-task-list">
                    <el-empty v-if="taskList.length < 1" :image="require('@/assets/img/no-todo.png')" :description="activeTab == 1 ? '暂无待办任务' : '暂无待办'"></el-empty>
                    <template v-else>
                        <template v-if="activeTab == 1">
                            <div v-for="(item, idx) in taskList" :key="idx" class="madp-content-item">
                                <!-- <div class="madp-content-item-time">{{ item.time }}</div> -->
                                <!-- 朋友圈任务 -->
                                <div v-if="item.isMoments == 0" class="madp-content-item-card">
                                    <div class="card-title">
                                        <div>
                                            <img src="@/assets/img/reminder/pengyouquanrenwu.png" alt />
                                            <p>朋友圈任务</p>
                                        </div>
                                        <div>
                                            <p class="card-state">{{ item.status | stateFilter }}</p>
                                        </div>
                                    </div>
                                    <div class="card-content-2">
                                        <div class="card-task-title text-one-ellipsis">{{ item.title }}</div>
                                        <div class="content-text">
                                            <span class="text-two-ellipsis">{{ item.content }}</span>
                                        </div>
                                        <div class="img-list" v-if="item.imgUrl || item.videoUrl">
                                            <img v-for="(src, idx) in item.imgUrl" :src="src" alt :key="idx" />
                                            <video v-for="(src, idx) in item.videoUrl" :src="src" alt :key="idx" />
                                        </div>
                                    </div>
                                    <div class="card-footer" v-if="item.status == 1">
                                        <div class="card-footer-btn cursor-pointer" @click="releaseInfo(item)">去发布</div>
                                    </div>
                                </div>
                                <!-- 获客任务 -->
                                <div v-if="item.isMoments == 1" class="madp-content-item-card">
                                    <div class="card-title">
                                        <div>
                                            <img src="@/assets/img/reminder/huokerenwu.png" alt />
                                            <p>获客任务</p>
                                        </div>
                                        <div>
                                            <p class="card-state">{{ item.status | stateFilter }}</p>
                                        </div>
                                    </div>
                                    <div class="card-task-title text-one-ellipsis">{{ item.title }}</div>
                                    <div class="container-list">
                                        <div class="content-item">
                                            <span class="content-item-label">目标</span>
                                            <span class="content-item-value">新增企业微信客户{{ item.addCount }}人</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">进度</span>
                                            <span class="content-item-value">已完成 {{ item.percentage || 0 }}%</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">时间</span>
                                            <span class="content-item-value">{{ item.beginTime }}至{{ item.endTime }}</span>
                                        </div>
                                    </div>
                                    <div class="card-footer" v-if="item.status == 1">
                                        <div class="card-footer-btn cursor-pointer" @click="intoAddCustomer">去添加</div>
                                    </div>
                                </div>
                                <!-- 活动推广任务 -->
                                <div v-if="item.isMoments == 2" class="madp-content-item-card">
                                    <div class="card-title">
                                        <div>
                                            <img src="@/assets/img/reminder/huodongtuiguang.png" alt />
                                            <p>活动推广任务</p>
                                        </div>
                                        <div>
                                            <p class="card-state">{{ item.status | stateFilter }}</p>
                                        </div>
                                    </div>
                                    <div class="card-task-title text-one-ellipsis">{{ item.name }}</div>
                                    <div class="container-list">
                                        <div class="content-item">
                                            <span class="content-item-label">目标</span>
                                            <span class="content-item-value">分享活动 {{ item.num }}人</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">进度</span>
                                            <span class="content-item-value">已完成 {{ item.percentage || 0 }}%</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">时间</span>
                                            <span class="content-item-value">{{ item.date }}</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">链接/素材</span>
                                        </div>
                                    </div>
                                    <div class="content-url">
                                        <img :src="item.imgUrl" alt />
                                        <p class="text-one-ellipsis">{{ item.desc }}</p>
                                    </div>
                                    <div class="card-footer">
                                        <div class="card-footer-btn btn1 cursor-pointer">浏览记录</div>
                                        <div class="card-footer-btn cursor-pointer">分享</div>
                                    </div>
                                </div>
                                <!-- 产品推广任务 -->
                                <div v-if="item.isMoments == 3" class="madp-content-item-card">
                                    <div class="card-title">
                                        <div>
                                            <img src="@/assets/img/reminder/chanpintuiguang.png" alt />
                                            <p>产品推广任务</p>
                                        </div>
                                        <div>
                                            <p class="card-state">{{ item.status | stateFilter }}</p>
                                        </div>
                                    </div>
                                    <div class="card-task-title text-one-ellipsis">{{ item.name }}</div>
                                    <div class="container-list">
                                        <div class="content-item">
                                            <span class="content-item-label">目标</span>
                                            <span class="content-item-value">分享产品 {{ item.num }}人</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">进度</span>
                                            <span class="content-item-value">已完成 {{ item.percentage || 0 }}%</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">时间</span>
                                            <span class="content-item-value">{{ item.date }}</span>
                                        </div>
                                        <div class="content-item">
                                            <span class="content-item-label">产品</span>
                                        </div>
                                    </div>
                                    <div class="content-url">
                                        <img :src="item.imgUrl" alt />
                                        <p class="text-one-ellipsis">{{ item.desc }}</p>
                                    </div>
                                    <div class="card-footer">
                                        <div class="card-footer-btn btn1 cursor-pointer">浏览记录</div>
                                        <div class="card-footer-btn cursor-pointer">分享</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-if="activeTab == 2">
                            <div v-for="(item, idx) in taskList" :key="idx" class="madp-content-item">
                                <div class="madp-content-item-time">{{ item.startTime }}</div>
                                <!-- 待办事项 -->
                                <div class="madp-content-item-card">
                                    <div class="card-title">
                                        <div>
                                            <img src="@/assets/img/reminder/daibanshixiang.png" alt />
                                            <p>待办事项</p>
                                        </div>
                                    </div>
                                    <div class="card-content-1">
                                        <span class="text-two-ellipsis">{{ item.doBody }}</span>
                                    </div>
                                    <div class="card-footer">
                                        <div class="user-info">
                                            <img :src="item.avatar || $defaultAvatar" alt="" srcset="" />
                                            <span>{{ item.remark }}</span>
                                        </div>
                                        <div v-if="item.doState == 2" class="card-footer-btn cursor-pointer" @click="doFollow(item)">跟进</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </mescroll-view>
        </div>
    </div>
</template>
<script>
    import MescrollView from '@/components/material/mescroll-view.vue';
    import * as managerReminderApi from '@/api/manager-reminder.js';
    import * as customerDetailApi from '@/api/customer-details';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        components: { MescrollView },
        mixins: [mxInitWxConfig],
        filters: {
            stateFilter(val) {
                switch (val) {
                    case 1:
                        return '进行中';
                    case 2:
                        return '完成';
                    case 3:
                        return '结束';
                    case 4:
                        return '结束未完成';
                    default:
                        return '--';
                }
            }
        },
        data() {
            return {
                loading: true,
                activeTab: '1',
                taskType: '',
                taskStatus: '',
                taskTypeList: [
                    // 任务类型
                    {
                        type: '',
                        label: '全部任务'
                    },
                    {
                        type: 0,
                        label: '朋友圈任务'
                    },
                    {
                        type: 1,
                        label: '获客任务'
                    }
                    // {
                    //   type: 2,
                    //   label: '产品推广'
                    // },
                    // {
                    //   type: 3,
                    //   label: '活动推广'
                    // }
                ],
                taskStatusList: [
                    // 任务状态
                    {
                        type: '',
                        label: '全部'
                    },
                    {
                        type: 1,
                        label: '进行中'
                    },
                    {
                        type: 2,
                        label: '完成'
                    },
                    {
                        type: 3,
                        label: '结束'
                    },
                    {
                        type: 4,
                        label: '结束-未完成'
                    }
                ],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                taskList: []
            };
        },
        watch: {
            wxUserId() {
                if (this.wxUserId) {
                    this.getDataList();
                }
            }
        },
        activated() {
            this.wxUserId = this.wxUserId || this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || '';
            let type = this.$route.query.type || 1;
            if (type) this.activeTab = type + '';
            if (this.wxUserId) {
                this.getDataList();
            }
        },
        created() {},
        mounted() {},
        methods: {
            // 发布到朋友圈
            releaseInfo(info) {
                let attachments = [];
                if (info.imgUrl && info.imgUrl.length > 0 && info.mediaId) {
                    info.mediaId.forEach((ele) => {
                        attachments.push({
                            msgtype: 'image', // 消息类型，必填
                            image: {
                                mediaid: ele // 图片的素材id
                            }
                        });
                    });
                } else if (info.imgUrl && info.imgUrl.length > 0 && info.mediaId) {
                    info.mediaId.forEach((ele) => {
                        attachments.push({
                            msgtype: 'video', // 消息类型，必填
                            video: {
                                mediaid: ele // 视频的素材id
                            }
                        });
                    });
                }
                this.$wxApi.shareToExternalMoments(info.content, attachments).then((res) => {
                    console.log(res);
                });
            },
            // 去添加客户
            intoAddCustomer() {
                this.$wxApi.navigateToAddCustomer((res) => {
                    //
                });
            },
            // tab切换
            changeTab() {
                this.page.current = 1;
                this.taskList = [];
                this.getDataList();
            },
            // 加载更多
            getMoreData() {
                this.page.current++;
                this.getDataList();
            },
            // 任务类型列表切换
            changeType(val) {
                this.page.current = 1;
                this.getDataList();
            },
            // 任务状态切换
            changeStatus(val) {
                this.page.current = 1;
                this.getDataList();
            },
            // 跟进任务
            doFollow(info) {
                if (!info.wxExternalUserid) return;
                customerDetailApi
                    .changeToDoState({
                        id: info.id,
                        state: 1
                    })
                    .then((res) => {
                        this.page.current = 1;
                        this.getDataList();
                        this.$wxApi
                            .openEnterpriseChat({
                                externalUserIds: [info.wxExternalUserid]
                            })
                            .then((res) => {
                                // console.log('打开会话成功====', res)
                            });
                    });
            },
            // 获取数据列表
            getDataList() {
                if (this.activeTab == 1) {
                    managerReminderApi
                        .getTaskList({
                            wxUserId: this.wxUserId,
                            status: this.taskStatus,
                            type: this.taskType,
                            current: this.page.current,
                            size: this.page.size
                        })
                        .then((res) => {
                            if (this.page.current == 1) {
                                this.taskList = res.data.data.records;
                            } else {
                                this.taskList.push(...res.data.data.records);
                            }
                            this.page.total = res.data.data.total;
                            this.loading = false;
                        });
                    this.loading = false;
                } else {
                    managerReminderApi
                        .remindDo({
                            wxUserId: this.wxUserId,
                            doState: 2,
                            current: this.page.current,
                            size: this.page.size
                        })
                        .then((res) => {
                            if (this.page.current == 1) {
                                this.taskList = res.data.data.records;
                            } else {
                                this.taskList.push(...res.data.data.records);
                            }
                            this.page.total = res.data.data.total;
                            this.loading = false;
                        });
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-manager-reminder {
        background: #fafafa;
        padding-bottom: 30px;
        height: 100vh;
        .madp-header {
            border-bottom: 1px solid rgba(#2c2c2c, 0.1);
            background: #ffffff;
            height: 44px;
            .tabs-menu {
                width: 100%;
                /deep/.el-tabs__header {
                    margin: 0;
                }
                /deep/.el-tabs__nav {
                    width: 45px;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    .el-tabs__item {
                        padding: 0;
                        width: 100%;
                        height: 43px;
                        text-align: center;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(44, 44, 44, 0.5);
                    }
                    .is-active {
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                    .el-tabs__active-bar {
                        display: flex;
                        justify-content: center;
                        background: none;
                    }
                    .el-tabs__active-bar:after {
                        content: '';
                        width: 16px;
                        height: 4px;
                        margin: 0 16px;
                        background: #ed5555;
                        border-radius: 8px;
                        position: absolute;
                        top: -2px;
                    }
                    .el-tabs__nav-wrap::after {
                        background: none;
                    }
                }
                /deep/.el-tabs__nav-wrap::after {
                    background: none;
                }
            }
        }
        .madp-content {
            padding: 0 16px;
            height: calc(100vh - 53px);
        }
        .madp-content-filter {
            display: flex;
            /deep/.el-input__inner {
                background: none;
                border: none;
                padding: 0;
                text-align: right;
                padding-right: 32px;
                width: 110px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(44, 44, 44, 0.8);
            }
            /deep/.el-icon-arrow-up:before {
                content: '\e78f';
                color: rgba(44, 44, 44, 0.5);
            }
        }
    }
    .madp-content-item {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &-time {
            padding: 2px 9px;
            background: rgba(44, 44, 44, 0.1);
            border-radius: 4px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(44, 44, 44, 0.5);
            text-align: center;
        }
        &-card {
            width: 100%;
            background: #ffffff;
            box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
            border-radius: 8px;
            padding: 16px;
            margin-top: 11px;
            .card-title {
                display: flex;
                justify-content: space-between;
                div {
                    display: flex;
                    align-items: center;
                    img {
                        width: 24px;
                        height: 24px;
                        margin-right: 8px;
                    }
                    p {
                        font-size: 15px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                }
                .card-state {
                    font-size: 13px;
                    font-weight: 400;
                    font-family: PingFangSC-Regular, PingFang SC;
                    color: #ffa62d;
                }
            }
            .card-content-1 {
                margin-top: 16px;
                background: #fafafa;
                padding: 16px 16px 29px 16px;
                span {
                    font-size: 15px;
                    font-weight: 400;
                    color: #2c2c2c;
                }
            }
            .card-content-2 {
                margin-top: 16px;
                background: #fafafa;
                box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                border-radius: 8px;
                padding: 16px;
                .card-task-title {
                    margin: 0;
                    margin-bottom: 12px;
                }
                .content-text {
                    span {
                        font-size: 13px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                }
                .img-list {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 8px;
                    img {
                        width: 90px;
                        height: 90px;
                        margin-right: 3px;
                        margin-bottom: 5px;
                    }
                    video {
                        width: 90px;
                        height: 90px;
                        margin-right: 3px;
                        margin-bottom: 5px;
                    }
                    :nth-child(3n) {
                        margin-right: 0;
                    }
                }
            }
            .card-footer {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 10px;
                .user-info {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        margin-right: 3px;
                    }
                    span {
                        font-size: 14px;
                    }
                }
                &-btn {
                    border-radius: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    border: 1px solid rgba(44, 44, 44, 0.1);
                    font-size: 14px;
                    font-weight: 400;
                    padding: 3px 9px;
                    margin-left: 8px;
                    color: rgba(237, 85, 85, 1);
                }
                .btn1 {
                    color: rgba(44, 44, 44, 0.5);
                }
            }
            .card-task-title {
                margin-top: 16px;
                margin-bottom: 12px;
                font-size: 15px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #2c2c2c;
            }
            .container-list {
                margin-top: 12px;
                .content-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                    &-label {
                        font-size: 15px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(44, 44, 44, 0.5);
                        margin-right: 16px;
                    }
                    &-value {
                        font-size: 15px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                }
            }
            .content-url {
                margin-top: 8px;
                padding: 6px;
                background: #fafafa;
                display: flex;
                align-items: center;
                img {
                    width: 46px;
                    height: 46px;
                    margin-right: 6px;
                }
                p {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(44, 44, 44, 0.8);
                    line-height: 22px;
                }
            }
        }
    }
</style>
